<template>
  <ScaleScreen
    :width="1920"
    :height="1080"
    :selfAdaption="$store.state.setting.isScale"
    :boxStyle="{ background: '#f0fafe' }"
    class="scale-wrap"
  >
    <dv-loading v-if="loading">Loading...</dv-loading>
    <div v-else class="host-body">
      <!-- 头部 s -->
      <div class="d-flex jc-center title_wrap">
        <div class="line"></div>
        <div class="d-flex jc-center">
          <div class="title">
            水位监测GIS一张图
            <!-- <span class="title-text">水位监测GIS一张图</span> -->
          </div>
        </div>
      </div>
      <div class="content-container">
        <CenterMap />
        <div class="left-content">
          <div
            class="left-content-select-box flex align-center justify-between"
          >
            <div class="flex align-center">
              <span class="el-icon-location-information"></span>
              <el-select v-model="value" placeholder="请选择" size="small">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <span
              class="left-content-right-text"
              @click="toastDetail('WaterStatisticsDetail')"
              >用水统计</span
            >
          </div>
          <div class="left-content-top-rect flex align-center justify-between">
            <div class="left">
              <div class="top">监测点</div>
              <div class="number">788个</div>
            </div>
            <div class="right">
              <div class="top">监测点</div>
              <div class="number">788个</div>
            </div>
          </div>
          <div class="left-content-center">
            <div class="item-title">
              <div class="item-title-text">设备统计</div>
              <div class="item-title-bor1"></div>
              <div class="item-title-bor2"></div>
            </div>
            <div class="item-panel">
              <EquipmentStatistics @toast-detail="toastDetail" />
            </div>
          </div>
          <div class="left-content-bottom">
            <div class="item-title">
              <div class="item-title-text">用水监测</div>
              <div class="item-title-bor1"></div>
              <div class="item-title-bor2"></div>
            </div>
            <div class="item-panel">
              <UseWaterStatistics />
            </div>
          </div>
        </div>
        <div class="right-content">
          <div class="right-content-item">
            <div class="item-title sub-title">
              <div
                class="item-title-text tab"
                @click="dataActive = 0"
                :class="{ 'data-active': dataActive === 0 }"
              >
                地下水实时监测
              </div>
              <div class="item-title-bor1"></div>
              <div class="item-title-bor2"></div>
              <div
                class="tab-2"
                @click="dataActive = 1"
                :class="{ 'data-active': dataActive === 1 }"
              >
                取用水实时监测
              </div>
            </div>
            <div class="item-panel">
              <DataMonitoring />
            </div>
          </div>
          <div class="right-content-item">
            <div class="item-title sub-title">
              <div
                class="item-title-text tab"
                @click="waterActive = 0"
                :class="{ 'water-active': waterActive === 0 }"
              >
                取用水户水量统计
              </div>
              <div class="item-title-bor1"></div>
              <div class="item-title-bor2"></div>

              <div
                class="tab-3"
                @click="waterActive = 1"
                :class="{ 'water-active': waterActive === 1 }"
              >
                涉水组织水量统计
              </div>
              <div
                class="tab-4"
                @click="waterActive = 2"
                :class="{ 'water-active': waterActive === 2 }"
              >
                行政区划水量统计
              </div>
            </div>
            <div class="item-panel">
              <WaterMonitoring />
            </div>
          </div>
        </div>
      </div>
      <CustomDialog
        :dialogVisible="dialogVisible"
        :fullscreen="fullscreen"
        width="45%"
      >
        <ItemWrap
          :title="dialogTittle"
          :height="fullscreen ? '100%' : '450px'"
          width="624px"
          :type="1"
          backgroundColor="rgba(150, 224, 241, 0.3)"
        >
          <template v-slot:RightIcon>
            <span
              :class="[
                fullscreen ? 'el-icon-copy-document' : 'el-icon-full-screen',
                'full-screen',
              ]"
              @click="isFullscreen"
            ></span>
            <span class="el-icon-close close-btn" @click="handleClosed"></span>
          </template>
          <component
            :is="currentComponents"
            :table-height="tableHeight"
          ></component>
        </ItemWrap>
      </CustomDialog>
    </div>
  </ScaleScreen>
</template>

<script>
import ScaleScreen from "@/components/scale-screen/scale-screen.vue";
import CenterMap from "../../components/map/center-map.vue";
import EquipmentStatistics from "./equipment-statistics.vue";
import UseWaterStatistics from "./use-water-statistics.vue";
import DataMonitoring from "./data-monitoring.vue";
import WaterMonitoring from "./water-monitoring.vue";
import EquipmentAlarm from "./equipment-alarm.vue";
import EquipmentNumber from "./equipment-number.vue";
import AbnormalNumber from "./abnormal-number.vue";
import WaterStatisticsDetail from "./water-statistics-detail.vue";

export default {
  components: {
    ScaleScreen,
    CenterMap,
    EquipmentStatistics,
    UseWaterStatistics,
    DataMonitoring,
    WaterMonitoring,
    EquipmentAlarm,
    EquipmentNumber,
    WaterStatisticsDetail,
    AbnormalNumber,
  },
  data() {
    return {
      dataActive: 0,
      waterActive: 0,
      loading: true,
      dialogTittle: "设备告警",
      dialogVisible: false,
      fullscreen: false,
      currentComponents: "EquipmentAlarm",
      tableHeight: 300,
      tableKey: 1,
      dialogTable: {},
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
    };
  },

  created() {
    this.cancelLoading();
  },

  watch: {
    fullscreen() {
      if (this.fullscreen) {
        this.changeHeight();
      } else {
        this.tableHeight = this.dialogTable[this.currentComponents] || 300;
      }
    },
  },

  methods: {
    cancelLoading() {
      let timer = setTimeout(() => {
        this.loading = false;
        clearTimeout(timer);
      }, 500);
    },

    toastDetail(components, title) {
      this.dialogTittle = title;
      this.currentComponents = components;
      this.fullscreen = false;
      this.dialogVisible = true;
    },

    isFullscreen() {
      this.fullscreen = !this.fullscreen;
    },

    handleClosed() {
      this.dialogVisible = false;
    },

    changeHeight() {
      this.$nextTick(() => {
        this.getTableHeight();
      });
    },

    getTableHeight() {
      const h = window.innerHeight;
      this.tableHeight = h - 30;
      // 首次加载强制更新table组件
      if (this.tableKey === 1) this.tableKey++;
    },
  },
};
</script>
<style lang="scss" scoped>
.host-body {
  height: 100%;
  .title_wrap {
    height: 80px;
    position: relative;
    margin-bottom: 4px;
    background: #f0fafe;
    .line {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 28px;
      height: 28px;
      background-image: url("../../assets/img/u4.png");
      background-size: 100% 100%;
      background-position: center center;
    }
  }

  .title {
    position: relative;
    text-align: center;
    background-size: cover;
    color: transparent;
    height: 60px;
    line-height: 80px;
    font-family: 微软雅黑, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 32px;
    color: rgb(2, 125, 180);
  }

  .content-container {
    width: 100%;
    height: calc(100% - 110px);
    margin-bottom: 30px;
    position: relative;

    .left-content {
      width: 450px;
      height: 100%;
      position: absolute;
      left: 30px;
      top: 30px;
      z-index: 99;
      .left-content-select-box {
        width: 100%;
        background: #ffffff;
        padding: 10px 15px;
        box-sizing: border-box;

        .el-select {
          width: 180px;
          margin-left: 10px;
        }
      }
      .el-icon-location-information {
        font-size: 28px;
        color: #169bd8;
        font-weight: 600;
      }

      .left-content-right-text {
        font-size: 16px;
        color: #169bd8;
        font-weight: 600;
        cursor: pointer;
      }

      .left-content-top-rect {
        width: 100%;
        margin-top: 10px;
        .left,
        .right {
          width: 48%;
          height: 80px;
          background: #ffffff;
          .top {
            font-size: 16px;
            background: #169bd8;
            color: #ffffff;
            height: 28px;
            line-height: 28px;
            text-align: center;
          }
          .number {
            font-size: 20px;
            color: #169bd8;
            text-align: center;
            line-height: 50px;
          }
        }
      }

      .left-content-center {
        background: #ffffff;
        margin-top: 10px;

        .item-panel {
          height: 260px;
        }
      }
      .left-content-bottom {
        background: #ffffff;
        margin-top: 10px;

        .item-panel {
          height: 420px;
        }
      }
    }

    .right-content {
      width: 450px;
      height: 100%;
      position: absolute;
      right: 30px;
      top: 30px;
      z-index: 99;
      .right-content-item {
        background: #ffffff;
        margin-top: 10px;

        .item-panel {
          height: 415px;
          background: #ffffff;
        }
      }
    }

    .item-title {
      font-size: 12px;
      color: #333;
      height: 30px;
      line-height: 26px;
      background: url("../../assets/img/u16.svg") no-repeat left bottom;
      background-size: 100%;
      position: relative;
      .item-title-text {
        width: 147px;
        text-align: center;
        color: #027db4;
      }
      .item-title-bor1 {
        position: absolute;
        right: 75px;
        top: 14px;
        width: 224px;
        height: 9px;
        background: url("../../assets/img/u17.svg") no-repeat center;
        background-size: 100% 100%;
      }
      .item-title-bor2 {
        position: absolute;
        right: 0px;
        top: 18px;
        width: 75px;
        height: 4px;
        background: url("../../assets/img/u18.svg") no-repeat center;
        background-size: 100% 100%;
      }
    }

    .sub-title {
      height: 44px;
      line-height: 40px;
      .item-title-bor1 {
        top: 42px;
      }
      .item-title-bor2 {
        top: 46px;
      }
      .tab {
        cursor: pointer;
      }

      .tab-2 {
        position: absolute;
        left: 170px;
        top: 4px;
        color: #027db4;
        font-size: 12px;
        cursor: pointer;
      }

      .tab-3 {
        position: absolute;
        left: 170px;
        top: 4px;
        color: #027db4;
        font-size: 12px;
        cursor: pointer;
      }
      .tab-4 {
        cursor: pointer;
        position: absolute;
        right: 40px;
        top: 4px;
        color: #027db4;
        font-size: 12px;
      }
    }
  }

  .full-screen {
    color: #999;
    font-weight: 600;
    font-size: 16px;
    margin-right: 12px;
    z-index: 99999;
  }

  .close-btn {
    color: #999;
    font-weight: 600;
    font-size: 18px;
    cursor: pointer;
    z-index: 99999;
  }
}

.data-active {
  font-size: 16px !important;
}
.water-active {
  font-size: 16px !important;
}

::v-deep {
  .centermap .r-result {
    position: absolute;
    right: 30px !important;
    top: 2px !important;
    z-index: 999;
    input {
      width: 450px !important;
    }
  }
}
</style>
